<template>
    <div class="confirm-wrapper">
        <div class="goBack" @click="goBack">
            <i class="mintui mintui-back"></i>返回菜单
        </div>
        <div class="list order-list">
            <order-list :activeFoodList="activeFoodList"
                        :showImg="true"
                        @plusCopies="plusCopies"
                        @changeCopies="changeCopies"
                        @minusCopies="minusCopies">
            </order-list>
        </div>
        <div class="info">
            <div class="title">订单信息00</div>
            <div class="item">
                <div class="item-name"><img src="../components/menu/img/octagon@2x.png"/> 桌台号</div>
                <div class="item-info">{{orderInfo.desk_number}}</div>
            </div>
            <div class="item">
                <div class="item-name"><img src="../components/menu/img/user@2x.png"/> 用餐人数</div>
                <div class="item-info">{{orderInfo.dining_count}}</div>
            </div>
            <div class="item">
                <div class="item-name"><img src="../components/menu/img/file-text@2x.png"/> 备注</div>
                <div class="item-right-container" @click="showRemark(true)">
                    <div class="item-desc">{{remark}}</div>
                    <div class="item-right"></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="totalPrice">￥{{renderPrice()}}</div>
            <div class="btn" @click="sureOrder">确认下单</div>
        </div>

        <div class="mask" v-show="isShowRemark">
            <div class="mask-body">
                <textarea rows="10" v-model="remark"></textarea>
                <div class="btn" @click="showRemark(false)">完成</div>
            </div>
        </div>

        <mt-popup
                v-model="popup.isVisible"
                :closeOnClickModal="false"
                popup-transition="popup-fade">
            <div class="copies-body">
                <div class="header">修改数量<span class="close" @click="popup.isVisible = false"></span></div>
                <div class="body">
                    <div class="name">{{popup.name}}</div>
                    <input v-model="popup.num"/>
                </div>
                <div class="foot" @click="sureCopies">确定</div>
            </div>
        </mt-popup>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    import _ from 'lodash'
    import {MessageBox, Indicator, Toast} from 'mint-ui';
    import orderList from '../components/menu/orderList.vue'

    export default {
        async asyncData ({res, req, error}) {
            let response = {};
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let tableInfo = req.query;
            let activeFoodList = [];
            if (tableInfo.yuyue == 'y') {
                try {
                    response = await axios.get('/api/h5/customer/pre-cuisine/detail', {
                        params: {
                            store_id: tableInfo.store,
                            desk_id: tableInfo.table,
                            queue_id: tableInfo.queue,
                            token
                        }
                    });
                    response = response.data.data || {};

                    response.cuisine_info.forEach((item) => {
                        let newObject = item;
                        item.cui_info = {
                            cui_cover: item.cui_cover,
                            cui_name: item.cui_name,
                            dimen: item.cui_dime_name
                        };
                        activeFoodList.push(newObject)
                    });
                } catch (e) {
                    error({});
                }
            } else {
                let tableData = await axios.get('/api/h5/customer/scan-order', {
                    params: {
                        store_id: tableInfo.store,
                        desk_id: tableInfo.table,
                        token
                    }
                });
                response.desk_number = tableData.data.data.number;
            }

            return {
                orderInfo: response,
                activeFoodList: activeFoodList,
                userInfo,
                token,
                tableInfo
            }
        },
        data(){
            return {
                isShowRemark: false,
                popup: {
                    isVisible: false,
                    num: 1,
                    name: '',
                    cui_dimen_id: ''
                },
                remark: ''
            }
        },
        head () {
            return {
                title: '确认订单'
            }
        },
        components: {
            orderList
        },
        mounted(){
            if (this.tableInfo.yuyue !== 'y') {
                let activeFoodList = JSON.parse(window.localStorage.getItem('activeFoodList'));

                this.activeFoodList = activeFoodList;
                this.orderInfo.dining_count = this.tableInfo.num
            }
        },
        methods: {
            goBack() {
                const url = `/menu?store=${this.tableInfo.store}&table=${this.tableInfo.table}&num=${this.tableInfo.num}`
                window.location.href = url
            },
            renderPrice(){
                let price = 0;
                this.activeFoodList.forEach((item) => {
                    price += item.copies * item.price
                });
                return Math.round(price * 100) / 100 || '0.00'
            },
            showRemark(type){
                this.isShowRemark = type
            },
            sureOrder(){
                if (this.activeFoodList.length == 0) {
                    Toast('请先选择菜品');
                    return
                }
                Indicator.open('创建订单中...');
                let formData = this.getFormData();

                let apiUrl = '/api/h5/customer/order';
                if (this.tableInfo.extra === 'y') { //加菜
                    apiUrl = '/api/h5/customer/order/extra'
                }
                axios.post(apiUrl, formData).then(res => {
                    Indicator.close();
                    if (res.data.error === 0) {
                        //清除本地缓存
                        window.localStorage.removeItem('activeFoodList');
                        window.location.href = `./dinner?store=${formData.store_id}&table=${formData.desk_id}&order=${res.data.data.order_id}`
                    } else {
                        Toast(res.data.desc || '系统错误')
                    }

                }).catch(e => {
                    Toast('系统错误')
                });
            },
            getFormData(){
                let formData = {};
                let cuisine_menu = [];
                let order_amount = 0;
                this.activeFoodList.forEach((item) => {
                    order_amount += item.copies * item.price;
                    cuisine_menu.push({
                        "cui_dimen_id": item.cui_dimen_id,
                        "copies": item.copies
                    });
                });
                let tableInfo = this.tableInfo
                formData = {
                    customer_id: this.userInfo.id,
                    store_id: tableInfo.store,
                    desk_id: tableInfo.table,
                    cuisine_menu: JSON.stringify(cuisine_menu),
                    order_amount: order_amount || 0,
                    remark: this.remark,
                    token: this.token
                };
                if (tableInfo.extra === 'y') { //加菜
                    formData.order_id = tableInfo.order
                } else {
                    formData.dining_count = tableInfo.num
                }
                return formData
            },
            plusCopies(item){
                item.copies += 1;
                window.localStorage.setItem('activeFoodList', JSON.stringify(this.activeFoodList));

            },
            minusCopies(item){
                if (item.copies > 1) {
                    item.copies -= 1;
                } else {
                    this.activeFoodList = _.filter(this.activeFoodList, (d) => {
                        return d.cui_dimen_id != item.cui_dimen_id
                    })
                }
                window.localStorage.setItem('activeFoodList', JSON.stringify(this.activeFoodList));
            },
            changeCopies(item){
                this.popup.isVisible = true;
                this.popup.num = item.copies;
                this.popup.name = item.cui_name;
                this.popup.cui_dimen_id = item.cui_dimen_id;
            },
            sureCopies(){
                let findItem = _.find(this.activeFoodList, (d) => {
                    return d.cui_dimen_id == this.popup.cui_dimen_id
                });

                findItem.copies = this.popup.num;
                this.popup.isVisible = false;
                window.localStorage.setItem('activeFoodList', JSON.stringify(this.activeFoodList));
            }
        }
    }
</script>
<style lang="less">
    @shadowColor: rgba(0, 0, 0, 0.1);
    @shadow-top: 0 -5px 10px -5px @shadowColor;
    .confirm-wrapper {
        background: white;
        height: 100vh;
        display: flex;
        flex-direction: column;
        .goBack {
            height: 40px;
            border-bottom: 1px solid #ddd;
            text-align: left;
            padding-left: 10px;
            line-height: 40px;
            font-size: 14px;
            color: #333;
            background: white;
        }
        .list {
            flex: 1;
            display: flex;
            flex-direction: column;
            .btn {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                    display: inline-block;
                    padding: 1px 30px;
                    line-height: 47px;
                    background: black;
                    color: white;
                    border-radius: 15px;
                }
            }
        }
        .info {
            padding: 0 20px;

            .title {
                font-size: 14px;
                height: 40px;
                line-height: 40px;
            }
            .item {
                font-size: 16px;
                height: 60px;
                line-height: 63px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 20px;
                img {
                    width: 20px;
                    vertical-align: middle;
                    margin-top: -4px;
                }
            }
            .item + .item {
                border-top: 1px solid #dedede;
            }
            .item-right-container {
                display: flex;
            }
            .item-info {
                text-align: center;
            }
            .item-desc {
                max-width: 200px;
                overflow: hidden;
            }
            .item-right {
                width: 22px;
                height: 100%;
                display: inline-block;
                background: url(../components/common/img/right.svg) no-repeat 0px 20px
            }
        }
    }

    .footer {
        box-shadow: @shadow-top;
        background: white;
        z-index: 9;
        height: 65px;
        display: flex;
        box-sizing: border-box;
        width: 100vw;
        .totalPrice {
            width: 201px;
            line-height: 65px;
            text-align: center;
            font-size: 18px;
        }
        .btn {
            flex: 1;
            text-align: center;
            font-size: 18px;
            line-height: 65px;
            background: black;
            color: white;
        }
    }

    .order-list {
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
        height: 280px;
        font-size: 12px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        z-index: 10;
        padding: 20px;
        .mask-body {
            flex: 1;
            textarea {
                width: 100%;
                border: 1px solid #eee;
                padding: 5px;
            }
            .btn {
                text-align: center;
                font-size: 18px;
                line-height: 50px;
                background: black;
                color: white;
                margin-top: 20px;
            }
        }
    }

    .copies-body {
        width: 295px;
        height: 265px;
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        .header {
            height: 45px;
            line-height: 45px;
            border-bottom: 1px solid #EDEDED;
            font-size: 18px;
            color: #000000;
            letter-spacing: 0.22px;
            text-align: center;
            position: relative;
            .close {
                position: absolute;
                display: block;
                width: 36px;
                height: 36px;
                top: -18px;
                right: -18px;
                border-radius: 50%;
                background: #fff url(../components/common/img/x@1x.png) no-repeat center;
            }
        }
        .body {
            flex: 1;
            padding: 20px;
            .name {
                font-size: 18px;
                color: #000000;
                letter-spacing: 0.22px;
                margin-bottom: 10px;
            }
            input {
                background: #FAFAFA;
                border: 1px solid #EDEDED;
                border-radius: 2px;
                width: 100%;
                height: 45px;
                padding: 0 10px;
            }

        }
        .foot {
            height: 65px;
            line-height: 65px;
            text-align: center;
            background: #000000;
            box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.10);
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 0.22px;
            border-radius: 0 0 5px 5px;
        }
    }

    .mint-popup {
        border-radius: 5px;
    }
</style>